02 How to Edit Your Website

site.json — Master Controls

This is the boss file. It controls everything about your site.

Copy{
    "name": "Coffee Bean",              ← Your name (appears in browser tab)
    "title": "Coffee Bean",             ← Browser tab title (same as name usually)
    "favicon": "assets/images/your-icon.png",  ← Optional: custom browser tab icon
    "description": "PhD candidate...",  ← Optional: shows in Google search results
    "highlight_color": "#ffff00",       ← Color for ==highlighted text== (yellow by default)

    "cv": {
        "enabled": true,                ← true = show CV button, false = hide it
        "path": "assets/cv.pdf",        ← Path to your CV file
        "viewer": "pages/cv.html",      ← Don't change this
        "mode": "view",                 ← "view" or "download"
        "label": "View CV"              ← Text on the button
    },

    "header": {
        "name": "Coffee Bean",          ← Big text at top of page
        "subtitle": "PhD Candidate",    ← Small text below your name
        "institution": "Caffeine Tech", ← Third line (shown with •)
        "image": "assets/images/hero/profile1x1.jpg",  ← Profile photo path
        "image_alt": "Coffee Bean"      ← Alt text for photo
    },

    "sections": [
        { "file": "data/about.json",        "id": "about",        "enabled": true },
        { "file": "data/publications.json", "id": "publications", "enabled": true },
        { "file": "data/research.json",     "id": "research",     "enabled": true },
        { "file": "data/education.json",    "id": "education",    "enabled": true },
        { "file": "data/contact.json",      "id": "contact",      "enabled": true }
    ]
}

What you can do in site.json:

about.json — About Me Section

Copy{
    "type": "about",              ← DON'T CHANGE
    "id": "about",                ← DON'T CHANGE
    "data": {
        "label": "ABOUT ME",      ← Section title (shown at top)
        "paragraphs": [           ← Your bio text
            "First paragraph here... **bold text** works!",
            "Second paragraph here..."
        ],
        "buttons": [              ← Optional: links below your bio
            {
                "label": "View My Lab",      ← Button text
                "url": "https://example.com", ← Button link
                "style": "primary",           ← "primary" (black) or "outline" (border)
                "align": "center"             ← "left", "center", "right"
            }
        ]
    }
}

What you can do:

publications.json — Your Papers List

Copy{
    "type": "publications",       ← DON'T CHANGE
    "id": "publications",         ← DON'T CHANGE
    "data": {
        "label": "PUBLICATIONS",  ← Section title
        "numbered": false,        ← true = show 1. 2. 3. before each paper
        "papers": [
            {
                "title": "Paper Title Here",           ← Paper name (required)
                "authors": "Author, A., Author, B.",   ← Author list (optional)
                "url": "https://doi.org/...",          ← Link to paper (optional)
                "meta": "Journal Name, 2024",          ← Journal/year in italics (optional)
                "text": "Brief abstract or note...",   ← Extra text (optional)
                "image": "path/to/image.jpg"           ← Thumbnail image (optional)
            }
        ]
    }
}

What you can do:

research.json — Research Interests

You have 3 ways to write this section. Pick ONE:

Option A — Paragraphs (freeform text)

Copy{
    "type": "research",              ← DON'T CHANGE
    "id": "research",                ← DON'T CHANGE
    "data": {
        "label": "RESEARCH",
        "paragraphs": [
            "I study **coffee brewing** and extraction kinetics.",
            "My lab focuses on ==flavor chemistry== and rheology."
        ]
    }
}

Option B — Texts (simple lines)

Copy{
    "type": "research",              ← DON'T CHANGE
    "id": "research",                ← DON'T CHANGE
    "data": {
        "label": "RESEARCH",
        "texts": [
            "**Primary:** Coffee Brewing, Extraction Kinetics",
            "**Secondary:** Chocolate Rheology, Pour-Over Dynamics"
        ]
    }
}

Option C — Items (key-value list)

Copy{
    "type": "research",              ← DON'T CHANGE
    "id": "research",                ← DON'T CHANGE
    "data": {
        "label": "RESEARCH",
        "items": [
            { "label": "Primary", "value": "Coffee Brewing, Extraction Kinetics" },
            { "label": "Secondary", "value": "Chocolate Rheology" }
        ]
    }
}

What you can do:

education.json — Your Degrees

Copy{
    "type": "education",             ← DON'T CHANGE
    "id": "education",               ← DON'T CHANGE
    "data": {
        "label": "EDUCATION",
        "items": [
            {
                "degree": "PhD Candidate in Coffee Science",   ← Degree name (required)
                "institution": "Caffeine Tech",                ← University (optional)
                "year": "2022 — Present",                      ← Date (optional)
                "description": "Dissertation on..."            ← Extra text (optional)
            }
        ]
    }
}

What you can do:

contact.json — Social Links & Contact Info

Copy{
    "type": "contact",              ← DON'T CHANGE
    "id": "contact",                 ← DON'T CHANGE
    "data": {
        "label": "CONNECT",                              ← Section title
        "text": "Let's connect!",                        ← Optional intro text
        "address": "Building 42, University Campus",     ← Optional address
        "extra_line": "Office hours: Mon-Wed 10-4",      ← Optional extra info
        "icons": [
            {
                "name": "googlescholar-old",    ← Icon name (from 45 available)
                "url": "https://scholar.google.com/",  ← Full link
                "label": "Google Scholar"       ← Tooltip text
            },
            {
                "name": "github",
                "url": "https://github.com/",
                "label": "GitHub"
            },
            {
                "name": "mail",
                "url": "mailto:hello@example.com",
                "label": "Email"
            }
        ]
    }
}

Available icon names (45 total):

Academic: googlescholar-old, googlescholar-new, orcid, researchgate, pubmed, scopus, publons, web-of-science, semanticscholar, hal, zenodo, osf, figshare, ieee, acm, arxiv, internetarchive

Social: github, gitlab, githubpages, linkedin, x, bluesky, mastodon, youtube, instagram, facebook, medium, substack, reddit, pinterest, whatsapp, dribbble, behance, artstation

General: mail, globe, university, graduation-cap, refinedgithub

What you can do:

Step-by-Step Guides

How to edit any text

Step 1: Open the JSON file for the section you want to edit (e.g. data/about.json for bio, data/education.json for degrees).

Step 2: Find the text you want to change inside "" quotes.

Step 3: Type your new text between the quotes.

Step 4: Save the file and refresh your browser.

Copy{
    "data": {
        "paragraphs": [
            "Old text"  →  "New text here"
        ]
    }
}

This works for any text field — name, bio, paper titles, degree names, button labels, etc.

How to add an item

Step 1: Open the JSON file (e.g. data/publications.json to add a paper, data/education.json to add a degree).

Step 2: Find the array [ ] that contains the items.

Step 3: Copy an existing { } block, paste it after the last item, and add a comma after the previous item.

Step 4: Edit the values inside the new { } block.

Step 5: Save and refresh.

Copy{
    "items": [
        { "degree": "Existing Degree", "institution": "Univ", "year": "2024" },
        { "degree": "New Degree", "institution": "Univ", "year": "2025" }
    ]
}

Use this pattern to add papers, degrees, icons, buttons, or any list item.

How to remove an item

Step 1: Open the JSON file.

Step 2: Find the item you want to remove inside the array [ ].

Step 3: Delete the entire { } block for that item, including the comma before or after it.

Step 4: Save and refresh.

Copy{
    "papers": [
        { "title": "Paper I want to keep", "authors": "Author", "url": "#", "meta": "Journal" },
        { "title": "Paper to remove", "authors": "Author", "url": "#", "meta": "Journal" }  ← Delete this block
    ]
}

Use this pattern to remove papers, degrees, icons, paragraphs, or any list item.

How to reorder items

Step 1: Open the JSON file.

Step 2: Find the array [ ] with the items.

Step 3: Cut an entire { } block and paste it higher or lower in the array.

Step 4: Save and refresh. Items will appear in the new order.

Copy{
    "items": [
        { "degree": "Second item", ... },  ← Cut and move this up
        { "degree": "First item", ... }    ← Paste here
    ]
}

How to add media (image, video, model)

Step 1: Open the JSON file for any section (about.json, education.json, etc.).

Step 2: Add the media field inside "data": { }.

Step 3: Set the path or URL.

Step 4: Save and refresh.

Copy{
    "data": {
        "label": "ABOUT ME",
        "paragraphs": [...],
        "image": "path/to/photo.jpg"        ← Add this for a photo
        "video": { "src": "https://youtu.be/...", "ratio": "16/9" }  ← Add this for a video
    }
}

How to enable/disable a section

Step 1: Open data/site.json.

Step 2: Find the section in the sections array.

Step 3: Change "enabled": true to "enabled": false to hide it, or false to true to show it again.

Step 4: Save and refresh.

Copy{
    "sections": [
        { "file": "data/about.json", "id": "about", "enabled": false }  ← Section hidden
    ]
}

The JSON file is kept — only the rendering is skipped.

Quick Cheat Sheet